<template>
  <el-dialog
    append-to-body
    title="选择商品型号"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    top="5%"
    width="850px">
    <el-form ref="form" label-width="240px" size="mini">
      <el-form-item label="商品:">
        <img :src="currModel.image?currModel.image:product.image" alt="" style="width: 100px;">
        <br>
        <span v-text="product.name"></span>
      </el-form-item>
      <el-form-item label="规格:">
        <span v-if="!currModel.specificationsData">-</span>
        <div class="specifications-data-box" style="display: inline-block; padding: 0px 10px;">
          <div class="item" v-for="(item,index) in currModel.specificationsData">
            {{ item.id }} : {{ item.name }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="型号:">
        <el-tag class="ovd_s" size="small" style="margin-left: 2px; width: auto; max-width: 80%; cursor: pointer" :type="currModelIndex===index?'warning':'info'" v-for="(item,index) in product.stockList" :key="index" @click="checkPrice(index)"> {{ item.model }} </el-tag>
      </el-form-item>
      <el-form-item label="剩余库存:">
        <span v-text="currModel.nums" class="b"></span>
      </el-form-item>
      <el-form-item label="价格:">
        <span v-text="'￥'+ToMoney(currModel.price)" class="red"></span>
      </el-form-item>
      <el-form-item label="描述:">
        <span v-if="!product.content">-</span>
        <div class="content-box" style="max-height: 300px; overflow-y: auto" v-html="product.content">
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" :disabled="(currModel.nums)===0">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>

export default {
  name: 'ProductChooseModelDialog',
  data: function () {
    return {
      callback: null,
      dialogVisible: false,
      currModelIndex:0,
      currModel: {
        model: '',
        price: 0,
        saleNums: 0,
        nums: 0,
        specificationsData:''
      },
      modelArr: [
        '大',
        '黑'
      ],
      product: {
        id: 0,
        name: '',
        image: this.NoImageUrl,
        shopId: 0,
        shopName: '',
        shopLogo: '',
        price: 0,
        modeArr: [
          /*  {name: '尺寸', list: ['大', '中', '小']},
           {name: '颜色', list: ['黑', '白','红']}, */
        ],
        stockList: [],
      }
    }
  },
  mounted() {
    let $this = this
    $this.bus.$on('ProductChooseModelDialogCallBus', function (actType, productData, callback) {
      $this.currModelIndex=0
      $this.product.id = productData.id
      $this.product.image = productData.image
      $this.product.content = productData.content
      $this.product.name = productData.name
      $this.product.supplierId = productData.supplierId
      $this.product.supplierName = productData.supplierName
      $this.product.supplierLogo = productData.supplierLogo
      $this.getModelDetail(function () {
        // 商品列表单次选择加入购物车
        $this.actType = actType

        // 商品详情,重复弹出
        $this.callback = callback
        // 初始化-默认值(model)
        if (productData.shopProductStock && productData.shopProductStock.model.length > 0) {
          $this.modelArr = productData.shopProductStock.model.split(',')
        } else {
          $this.modelArr = $this.product.stockList[0].model.split(',')
        }
        $this.checkPrice()
        $this.dialogVisible = true
        $this.$forceUpdate()
      })
    })
    // $this.checkPrice()
  },
  methods: {
    getModelDetail: function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'SupplierProduct/supplierProductModeDetail', {
        id: $this.product.id,
      }, function (data) {
        $this.product.id = data.id
        $this.product.name = data.name
        $this.product.content = data.content
        $this.product.image = data.image
        $this.product.stockList = data.stockList
        $this.product.modelArr = data.modelArr
        callback()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 确认选择操作
    confirm: function () {
      if (this.actType === 'productListItem') {
        MyCartTools.addProduct({
          id: this.currModel.id,
          productId: this.product.id,
          name: this.product.name,
          image: this.currModel.image ? this.currModel.image : this.product.image,
          supplierId: this.product.supplierId,
          supplierName: this.product.supplierName,
          supplierLogo: this.product.supplierLogo,
          nums: 1,
          price: this.currModel.price,
          model: this.currModel.model,
        })
        this.dialogVisible = false
        this.$message.success('添加购物车成功')
        return;
      }
      // console.log('this.currModel',this.currModel)
      if (typeof this.callback !== 'undefined') {
        this.callback(this.currModel)
      }
      this.dialogVisible = false
    },
    checkPrice: function (index) {
      let $this = this
      if (typeof index!=='undefined'){
        $this.currModelIndex=index
      }
      var currModel=$this.product.stockList[$this.currModelIndex]
      // if (!currModel || !currModel.specificationsData) {
      //   currModel.specificationsData=""
      // }else{
      //   var specificationsData = this.mapToArray(currModel.specificationsData)
      //   currModel.specificationsData = specificationsData
      // }
      console.log('currModel.specificationsData',typeof currModel.specificationsData)
      if (currModel.specificationsData && !currModel.specificationsData.length){
        currModel.specificationsData=this.mapToArray(currModel.specificationsData)
      }
      $this.currModel = currModel
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.specifications-data-box {
  background: #f5e1e1;
  text-indent: 5px;
}

.specifications-data-box > .item {
  border-bottom: 1px solid #CCCCCC
}

.specifications-data-box > .item:last-child {
  border: none;
}
</style>
